<template>
  <view class="invitation">
    <customHeader title="邀好友，组团学" />
    <view class="invitation-main" :class="invitationMainClass">
      <swiper
        previous-margin="136rpx"
        next-margin="136rpx"
        class="swiper-wrap"
        :duration="500"
        :interval="2000"
        :current="swiperCurrent"
        vertical
        :class="{ 'single-swiper': !isShowSwiperDots }"
        @change="handleSwiperChange"
      >
        <swiper-item
          v-for="(item, index) in share_poster"
          :key="index"
          class="swiper-item"
          :class="currentSwiperClass(index)"
        >
          <view class="image-wrap" :class="currentSwiperClass(index)">
            <Poster
              :invite_img="item"
              :shareInfo="shareInfo"
              :canvas-id="'poster' + index"
              @start="handleStartDraw"
              @end="handleEndDraw"
            />
          </view>
        </swiper-item>
      </swiper>
      <!--  -->
      <view
        v-show="isShowSwiperDots"
        class="indicator-dots"
        @tap="handleSwiperSlide"
      >
        <image
          v-for="(img, index) in indicatorDots"
          :key="index"
          :lazy-load="true"
          :data-id="index"
          class="indicator-dots-item"
          :src="img"
        />
      </view>
    </view>
    <view v-if="!isLoading" class="invitation-bottom">
      <image :src="LONG_PRESS_INVITATION_BGI" />
    </view>
    <view v-else class="default-loading" :style="defaultLoadingBg"> </view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import "./index.scss";
import Poster from "./components/invite-poster";
import customHeader from "@/components/custom-header";
import { sharePoster } from "@/libs/api/group";
const flower =
  "http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1607512167942_0.5837336761920482";
const point =
  "http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1607512167954_0.4115547037920906";

/**生成图片中的背景图 */
const loadingDefaultImg =
  "https://xthk-guarden.oss-cn-shenzhen.aliyuncs.com/images/user/202012/1608885099431.png";

/**长按分享背景图 */
const LONG_PRESS_INVITATION_BGI =
  "https://app-version-1.oss-cn-shenzhen.aliyuncs.com/oss/savatar/2021/1610346141_855.png";
export default {
  components: {
    Poster,
    customHeader
  },
  data() {
    return {
      LONG_PRESS_INVITATION_BGI,
      source: [],
      imgInfo: {},
      share_poster: [],
      current: 0,
      swiperCurrent: 0,
      shareInfo: {},
      activity_id: undefined
    };
  },
  computed: {
    indicatorDots() {
      return this.share_poster.map((i, index) => {
        return index === this.swiperCurrent ? flower : point;
      });
    },
    /**是否展示swiper指示点 */
    isShowSwiperDots() {
      return this.share_poster.length > 1;
    },
    invitationMainClass() {
      return {
        "loading-class": this.isLoading
      };
    },
    /**加载中的背景图 */
    defaultLoadingBg() {
      return {
        "background-image": `url(${loadingDefaultImg})`
      };
    }
  },
  onLoad({ id }) {
    this.activity_id = id;
    this.isLoading = true;
    this.handleGetSharePoster();
  },
  methods: {
    /**获取分享海报 */
    async handleGetSharePoster() {
      const [err, { data }] = await this.$captureCatch(
        sharePoster({ id: this.activity_id })
      );
      if (err) return this.$message(err?.message);
      this.share_poster = data?.share_poster || [];
      this.shareInfo = data;
    },
    handleStartDraw() {
      this.isLoading = true;
      this.$startLoading("海报生成中");
    },
    handleEndDraw() {
      this.isLoading = false;
      this.$endLoading();
    },
    handleSwiperChange({ target: { current } }) {
      this.swiperCurrent = current;
    },

    /**当前展示的团是否为单个团 */
    currentSwiperClass(index) {
      return {
        active: this.swiperCurrent === index
      };
    },
    handleSwiperSlide({ target: { dataset } }) {
      const { id } = dataset;
      if (id === undefined || id === this.swiperCurrent) return;

      this.swiperCurrent = id;
    }
  }
};
</script>
